/**
 * 自定义svg格式加载
 */
Vue.component('SvgIcon', {
    template: `<svg :style="{ width, height }">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>`,
    props: {
        prefix: {
            type: String,
            default: '#icon-',
        },
        name: String,
        color: {
            type: String,
            default: '',
        },
        width: {
            type: String,
            default: '16px',
        },
        height: {
            type: String,
            default: '16px',
        },
    },
})
/**
 * 上传图片
 */
Vue.component('yl-upload', {
    template: `<div>
    <div class="preview" v-show="Picture_URL">
        <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px" :src="base + Picture_URL" fit="contain"></el-image>
        <span class="el-upload-list__item-actions">
            <span @click="handlePictureCardPreview(base + Picture_URL)"><i class="el-icon-zoom-in"></i></span>
            <span @click="handleRemove"><i class="el-icon-delete"></i></span>
        </span>
    </div>
    <el-upload :disabled="loading" v-show="!Picture_URL" class="upload-demo" :show-file-list="false" :on-change="upload"
        list-type="picture-card" action="" accept="image/*" :auto-upload="false">
        <i slot="default" :class="loading?'el-icon-loading':'el-icon-plus'"></i>
        <div class="el-upload__tip" slot="tip"><slot></slot></div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <el-image width="100%" fit="contain" :src="dialogImageUrl">
    </el-dialog></div>`,
    props: {
        action: {
            type: String,
            default: '/FileList'
        },
        value: {
            type: String,
            default: ''
        },
        compress: {
            type: Number,
            default: 1
        },
        base: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            Picture_URL: this.value,
            loading: false,
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    watch: {
        value(newVal) {
            this.Picture_URL = newVal
        },
        Picture_URL(newVal) {
            this.$emit('input', newVal);
        }
    },
    methods: {
        upload({ raw }) {
            const that = this;
            new Compressor(raw, {
                quality: 1,
                success(file) {
                    that.loading = true;
                    const formData = new FormData();
                    formData.append('file', file, file.name);
                    let oFileReader = new FileReader();
                    oFileReader.readAsDataURL(file);
                    oFileReader.onload = function (e) {
                        $.ajax({
                            type: 'POST',
                            url: DomainName + that.action,
                            data: {
                                Data: e.target.result,
                                DataLength: file.size,
                                FileName: file.name
                            },
                            complete: function (XMLHttpRequest) {
                                that.loading = false
                                if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                                    window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                                }
                            },
                            success: function (Result) {
                                if (Result.Status == "success") {
                                    that.Picture_URL = Result.Picture_Url
                                    that.$message.success('上传成功')
                                } else {
                                    that.$message.error('上传失败')
                                }
                            },
                            error: function () {
                                that.$message.error("操作失败，请稍后再试")
                            },
                            dataType: "json"
                        });
                    }
                },
                error(err) {
                    console.log(err.message);
                },
            });
        },
        handlePictureCardPreview(Val) {
            this.dialogVisible = true
            this.dialogImageUrl = Val
        },
        handleRemove() {
            this.Picture_URL = ''
        }
    }
})
/**
 * 富文本
 */
Vue.component('yl-text-editor', {
    template: `<div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>`,
    props: {
        value: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '请填写富文本内容...'
        },
        max: {
            type: Number,
            default: 0,
        },
        type: {
            type: String,
            default: 'default'
        },
        disabled: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            editor: null,//核心
            html: this.value,//文本内容
        }
    },
    watch: {
        html(newVal) {//组件双向绑定
            this.$emit('input', newVal);
        },
        value(newVal) {//更新文本内容
            if (this.editor.getHtml() != newVal) {
                this.editor.setHtml(newVal);
            }
        },
        disabled(disabled) {//动态禁用状态
            if (this.editor.isDisabled() && !disabled) {
                this.editor.enable();
            } else if (!this.editor.isDisabled() && disabled) {
                this.editor.disable();
            }
        }
    },
    computed: {
        maxLength() {//最大文字限制，默认0为无限制
            return this.max == 0 ? {} : { maxLength: this.max };
        },
        mode() {//是否开启简洁模式
            return this.type == 'default' || this.type == 'simple' ? this.type : 'default';
        }
    },
    methods: {
        init() {//初始化
            const { createEditor, createToolbar } = window.wangEditor
            const editorConfig = {
                placeholder: this.placeholder,
                ...this.maxLength,
                readOnly: this.disabled,
                onChange: (editor) => {
                    this.html = editor.getHtml();
                },
                onDestroyed(editor) {
                    editor.destroy();
                }
            }
            const editor = createEditor({
                selector: '#editor-container',
                html: '<p><br></p>',
                config: editorConfig,
                mode: this.mode,
            })
            const toolbarConfig = {}
            const toolbar = createToolbar({
                editor: editor,
                selector: '#toolbar-container',
                config: toolbarConfig,
                mode: this.mode,
            })
            this.editor = Object.seal(editor);
        }
    },
    mounted() {
        this.init()
    }
})